import { Button, theme, Modal } from 'antd'
import { logout, goto } from '@/api'
import {replaceColor} from '@/api/color.ts'
import {rgbaToHex,rgbToHex} from '@/util/colorTool.ts'
import './index.less'


const { useToken } = theme

function Home() {
    // 获取Design Token
    const { token } = useToken()

    const [modal, contextHolder] = Modal.useModal()
  
    // 退出登录
    const exit = () => {
        modal.confirm({
            title: '是否退出登录？',
            onOk() {
                logout()
            },
        })
    }
    return (
        <div className="P-home">
            <h1  style={{ color: token.colorText }}>Home Page</h1>
            <div className="ipt-con">
                <Button
                    onClick={() => {
                        goto('/login')
                    }}
                >
                    组件外跳转
                </Button>
                <Button
                    onClick={() => {
                        replaceColor(undefined,{
                            type:'hex',
                            targetColor:rgbToHex(230,227,218),
                            replaceColor:rgbaToHex(255,255,255,0.1),
                        },undefined)
                    }}
                >
                    test
                </Button>
            </div>
            <div className="ipt-con">
                <Button type="primary" onClick={exit}>
                    返回登录
                </Button>
            </div>
            <div>

            </div>
            {
                // 这是最终解决Modal.method跟随换肤的关键，contextHolder在组件DOM中随便找个地方放就行
                contextHolder
            }
        </div>
    )
}

export default Home
